<template>
	<view style="padding: 50rpx;">
		<view class="infoInput">
			<form @submit="submit">
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe6fe;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="text" name="username" placeholder="请输入用户名" v-model="username" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe60d;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="text" name="nickname" placeholder="请输入昵称" v-model="nickname" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe60c;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="number" name="phone" placeholder="请输入手机号码" v-model="phone" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe630;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="password" name="password" placeholder="请输入密码" v-model="password" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe630;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="password" name="passwordAgain" placeholder="请再次输入密码" v-model="passwordAgain" />
					</view>
				</view>
				<view style="margin-top:100rpx;">
					<button type="default" class="gui-button" formType="submit" 
					style="border-radius:50rpx;background-color: #007AFF;">
						<text class="gui-color-white gui-button-text">注册</text>
					</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup>
	import {ref,getCurrentInstance} from 'vue'
	import graceChecker from "@/Grace6/js/checker.js"
	const app = getCurrentInstance();
	const ybapi = app.appContext.config.globalProperties.ybapi;
	let username = ref('');
	let nickname = ref('');
	let phone = ref('');
	let password = ref('');
	let passwordAgain = ref('');
	let usertype = ref(0);
	function submit(e){
		console.log(e)
		var formData = e.detail.value;
		console.log(formData);
		var rule = [
			{name:"username", checkType: "string", checkRule:"1,50", errorMsg:"注册账户不能为空"},
			{name:"nickname", checkType: "string", checkRule:"1,50", errorMsg:"注册昵称不能为空"},
			{name:"phone", checkType : "phone", checkRule:"", errorMsg:"手机号码有误"},
			{name:"password", checkType : "string", checkRule:"1,100", errorMsg:"注册密码不能为空"},
			{name:"passwordAgain", checkType : "samewith", checkRule:"password", errorMsg:"两次密码输入不一致"},
		];
		var checkRes = graceChecker.check(formData, rule);
		console.log(checkRes)
		if(checkRes){
			// 处理注册用户的操作
			
			
			// 跳转主页
		}else{
			uni.showToast({
				title: graceChecker.error,
				icon: "none"
			});
		}
	}
</script>

<style>
	.infoInput {
		padding: 20rpx;
	}
	
	.Icon {
		font-size: 25px;
		color: #007AFF;
	}
	
	.info {
		height: 50px;
		padding: 0rpx 10rpx;
		border-bottom: 1rpx solid gray;
	}   
</style>
